
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>销售报表</title>
    <script type="text/javascript" src="/static/plugins/echarts/echarts-all.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 900px;height:400px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));

    // 指定图表的配置项和数据
    var option = {
        color: ['#3398db'],
        title : {
            text: '销售报表',//图表标题(写死的)
            subtext: '${groupType}',//副标题由后台传过来 (通过页面选中的类型查出咱们封装map的value值)
            left : "center"//对其方式
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['销售总额'],//数据值的含义(写死的)
            left : "left"
        },
        toolbox: {//工具栏用于图表数据类型切换
            show : true,
            feature : {
                dataView : {show: true, readOnly: true},//数据视图
                magicType : {show: true, type: ['line', 'bar']},//显示方式(折线/柱状)
                restore : {show: true},//还原
                saveAsImage : {show: true}//保存为图片
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',//名称
                data : ${x} //X轴显示的数据 ["x","y","z"]
            }
        ],
        yAxis : [
            {
                type : 'value' //值的方式
            }
        ],
        series : [
            {
                name:'销售总额',
                type:'bar',//Y轴以柱状型显示
                data: ${y},//Y轴显示的数值 [10,20,30]
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}//算出平均值
                    ]
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>

</body>
</html>
